.leftBox {
  position: absolute;
  left: -100px;
  bottom: -100px;
  width: 200px;
  height: 200px;
  border-radius: 30% 70% 0% 33% / 64% 70% 0% 36%;
  background-color: #ef9364;
  animation: 5s infinite light linear;
  box-shadow: 90px 90px 90px 90px #ef9364, 90px -90px 190px 90px #ef9364,
    -90px 90px 90px 190px #ef9364, -90px -90px 90px 100px #ef9364;
}

.rightBox {
  @keyframes light {
    0% {
      transform: translate(0) scale(1);
    }

    33% {
      transform: translate(30px, -20px) scale(1);
    }

    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }

    to {
      transform: translate(0, 0) scale(1);
    }
  }
  @keyframes light2 {
    0% {
      transform: translate(0) scale(1);
    }

    33% {
      transform: translate(-20px, 20px) scale(1.1);
    }

    66% {
      transform: translate(20px, -20px) scale(0.9);
    }

    to {
      transform: translate(0, 0) scale(1);
    }
  }
  position: absolute;
  right: -120px;
  top: -150px;
  width: 200px;
  height: 200px;
  background-color: #8b7bcf;
  border-radius: 30% 70% 67% 13% / 44% 30% 70% 66%;
  animation: 5s infinite light2 linear;
  box-shadow: 90px 90px 90px 90px #8b7bcf, 90px -90px 90px 190px #8b7bcf,
    -90px 90px 90px 90px #8b7bcf, -90px -90px 90px 190px #8b7bcf;
}

.bannerContainer {
  position: relative;
  overflow: hidden;
  height: 867px;
  margin-top: -98px;
  background-color: black;
  position: relative;
  background-image: url("/img/rectangle.png");
  background-size: 66.6px;
  color: #fff;
 
  .bottomTips {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    .tipsContent {
      background: linear-gradient(90deg, #000000 0%, #292929 35.48%);
      height: 37px;
      text-align: center;
      line-height: 37px;
      font-size: 14px;
      .text {
        .blogTextIcon {
          margin-right: 10px;
          position: relative;
          top: 5px;
        }
      }
    }
  }

  .content {
    max-width: var(--global-main-width);
    margin: 0 auto;
    width: 100%;
    position: relative;
    display: flex;
    position: relative;
    .left {
      position: relative;
      z-index: 2;
      width: 50%;
      .highText {
        margin-left: 21%;
        margin-top: 253px;
        .textWrap {
          font-weight: 700;
          font-size: 60px;
          line-height: 80px;

          .typewriterText {
            line-height: 100px;
            width: 690px;
            background: linear-gradient(
              269.74deg,
              #f3861f 12.97%,
              #b588b7 62.82%,
              #9f8ced 98.79%
            );
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }

      .btnWrap {
        margin-top: 31px;
        margin-left: 21%;
        font-size: 14px;
        color: #fff;
        span {
          border-radius: 36px;
          padding: 10px;
          height: 44px;
          line-height: 24px;
          font-weight: 700;
          color: #fff;
          cursor: pointer;

          &.more {
            margin-right: 20px;
            background-color: var(--home-btn-bg);
          }
          &.hub {
            color: var(--home-btn-bg);
            border: 1px solid var(--home-btn-bg);
            box-sizing: border-box;
          }
        }
        a {
          text-decoration: none;
        }
      }
    }
    .right {
      .loopRun {
        @keyframes jump {
          0% {
            transform: translate(-50%, -50%) scale(1);
          }
          40% {
            transform: translate(-50%, -60%) scale(1);
          }
          80% {
            transform: translate(-50%, -40%) scale(1);
          }
          100% {
            transform: translate(-50%, -50%) scale(1);
          }
        }

        @keyframes animX {
          0% {
            left: -4%;
          }

          100% {
            left: 96%;
          }
        }

        @keyframes animY {
          0% {
            top: -4%;
          }

          100% {
            top: 96%;
          }
        }
        @keyframes scale {
          0% {
            transform: scale(0.5);
          }

          50% {
            transform: scale(1);
          }

          100% {
            transform: scale(0.5);
          }
        }

        width: 400px;
        height: 300px;
        position: absolute;
        border-radius: 50%;
        top: 200px;
        right: 100px;
        .circle {
          border-radius: 50%;
          position: absolute;
          text-align: center;
          z-index: 2;
          color: #fff;
          &.circle1 {
            width: 94px;
            height: 94px;
            background: linear-gradient(180deg, #dbfdff 0%, #52d1d9 100%);
            line-height: 94px;
            animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -3.1s infinite alternate,
              animY 6s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
              scale 12s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
          }
          &.circle3 {
            width: 88px;
            height: 88px;
            background: linear-gradient(180deg, #ffca80 0%, #f18433 100%);

            line-height: 88px;
            animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -7.8s infinite alternate,
              animY 6s cubic-bezier(0.36, 0, 0.64, 1) -4.8s infinite alternate,
              scale 12s cubic-bezier(0.36, 0, 0.64, 1) -4.8s infinite alternate;
          }
          &.circle5 {
            width: 80px;
            height: 80px;
            background: linear-gradient(180deg, #dfd8ff 0%, #8c7cd0 100%);
            line-height: 80px;
            animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -12.6s infinite alternate,
              animY 6s cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate,
              scale 12s cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate;
          }
        }

        .centerCircle {
          width: 185px;
          height: 185px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          z-index: 3;
          animation: jump 10s ease infinite alternate;
        }
      }
    }
    .bline {
      width: 1323px;
      height: 399px;
      position: absolute;
      top: 257px;
      right: -160px;
      background-image: url("/img/home/hcard/bline.png");
      z-index: 1;
    }
  }
}

@media screen and (max-width: 1024px) {
  .leftBox {
    left: -150px;
    bottom: -150px;
    width: 80px;
    height: 80px;
    box-shadow: 90px -90px 120px 90px #ef9364, -90px 90px 120px 90px #ef9364;
  }
  .rightBox {
    right: -120px;
    top: -150px;
    width: 80px;
    height: 80px;
    background-color: #8b7bcf;
    border-radius: 30% 70% 67% 13% / 44% 30% 70% 66%;
    animation: 5s infinite light2 linear;
    box-shadow: -90px 90px 90px 90px #8b7bcf, -90px -90px 90px 190px #8b7bcf;
  }
  .bannerContainer {
    min-width: 100vw;
    height: auto;
    padding-bottom: 170px;

    .content {
      .left {
        width: 100%;
        .highText {
          margin-left: 10%;
        }
        .btnWrap {
          margin-left: 10%;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .bannerContainer {
    .content {
      .left {
        width: 100%;
        .highText {
          margin-left: 5%;
        }
        .btnWrap {
          margin-left: 5%;
        }
      }
    }
    .bline {
      width: 100% !important;
      right: 0 !important;
    }
  }
}
